<template>
    <div class="ele-body">
        <el-card shadow="never">

            <el-form :model="table.where" label-width="85px" class="ele-form-search">
                <el-row :gutter="5">

                    <el-col :md="4" :sm="12">
                        <el-form-item label="班级：">
                            <el-select v-model="table.where.face_store" placeholder="请选择">
                                <el-option-group
                                    v-for="group in extra.grade"
                                    :key="group.label"
                                    :label="group.label">
                                    <el-option
                                        v-for="item in group.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                        <span v-html="item.label" class="pl-15"></span>
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :md="5" :sm="12">
                        <el-form-item label="学生：">
                            <el-input v-model="table.where.student_name" placeholder="请输入学生姓名搜索"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :md="5" :sm="12">
                        <el-form-item label="接送状态：">
                            <el-select v-model="table.where.status" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="入校" value="1"></el-option>
                                <el-option key="2" label="出校" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row :gutter="5">

                    <el-col :md="6" :sm="12">
                        <el-form-item label="接送时间：">
                            <el-date-picker
                                v-model="table.where.pick_at"
                                type="datetimerange"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small" 
                                >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :md="12" :sm="12">
                        <el-form-item>
                            <div class="datetime-sel">
                                <el-button-group>
                                    <el-button size="small" @click="dateFilter('1h')">最近一小时</el-button>
                                    <el-button size="small" @click="dateFilter('1d')">最近一天</el-button>
                                    <el-button size="small" @click="dateFilter('3d')">最近3天</el-button>
                                    <el-button size="small" @click="dateFilter('7d')">最近7天</el-button>
                                </el-button-group>
                            </div>
                            <div class="search-btns">
                                <el-button size="small" type="primary" @click="filter">查询</el-button>
                            </div>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>

            <ele-data-table ref="table" :config="table" height="calc(100vh - 265px)">

                <template slot-scope="{index}">
                    <el-table-column type="index" :index="index" label="序号" width="60" align="center" fixed="left" show-overflow-tooltip/>
                    <el-table-column prop="student_name" label="学生姓名" show-overflow-tooltip align="center" min-width="130"/>
                    <el-table-column label="性别" min-width="100" align="center">
                        <template slot-scope="{row}">
                            <el-tag :type="['primary','success','warning'][row.student_sex-1]" size="mini">{{ ['男', '女', '保密'][row.student_sex-1] }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="student_class" label="班级" show-overflow-tooltip align="center" min-width="120"/>
                    <el-table-column prop="name" label="接送人" show-overflow-tooltip align="center" min-width="120"/>
                    <el-table-column prop="relationship" label="关系" show-overflow-tooltip align="center" min-width="130"/>
                    <el-table-column prop="phone" label="接送人电话" show-overflow-tooltip align="center" min-width="120"/>
                    <el-table-column prop="infomation" label="接送信息" show-overflow-tooltip align="center" min-width="120"/>

                    <el-table-column label="状态" min-width="100" align="center">
                        <template slot-scope="{row}">
                            <el-tag :type="['default', 'success'][row.status-1]" size="mini">{{ ['入校', '出校'][row.status-1] }}</el-tag>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="接送时间" sortable="custom" show-overflow-tooltip align="center" min-width="160">
                        <template slot-scope="{row}">{{ row.pick_at }}</template>
                    </el-table-column>
                </template>

            </ele-data-table>

        </el-card>
    </div>
</template>

<script>


export default {
    name: "Pick",

    data() {
        let where = {
            datetime: ['2021-08-10 12:00:00', '2021-08-11 08:00:00']
        }
        return {
            choose: [],  // 表格选中数据
            extra: {
                grade: [
                    {
                        label: '热门城市',
                        options: [{
                            value: 'Shanghai',
                            label: '上海'
                        }, {
                            value: 'Beijing',
                            label: '北京'
                        }]
                    }, 
                    {
                        label: '城市名',
                        options: [{
                            value: 'Chengdu',
                            label: '成都'
                        }, {
                            value: 'Shenzhen',
                            label: '深圳'
                        }, {
                            value: 'Guangzhou',
                            label: '广州'
                        }, {
                            value: 'Dalian',
                            label: '大连'
                        }]
                    }
                ],
            },
            table: {
                url: '/api/admin/access/pick', 
                method: 'post',
                where: where
            },
        };
    },

    mounted() {},

    methods: {
        
        removeRow() {

        },

        dateFilter(type) {
            this.$refs.table.reload({ page: 1, daterange: type })
        },

        filter() {
            this.$refs.table.reload({ page: 1 })
        }
    },
};
</script>

<style>
.datetime-sel, .search-btns {
    margin: 0 10px;
    float: left;
}
.inline-sel {
    float: left;
    width: 150px;
}
.w50 {
    width: 100px;
    margin-right: 10px;
}
</style>
